<template>
  <div>
    <div class="search-container">
      <el-input v-model="search" prefix-icon="el-icon-search" style="margin-right: 5px;width: 400px"
                placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="searchClick">搜索 🔍</el-button>
      <el-button type="info" @click="clearClick">清空</el-button>
    </div>
    <div class="main-container">
      <el-card class="box-card" v-for="(admin,index) in allAdmins" :key="index">
        <div slot="header" class="clearfix">
          <span>{{ admin.name }}</span>
          <el-button style="float: right; padding: 3px 0; color: red" type="text" @click="delClick(admin.id)"><i
              class="el-icon-delete"></i>
          </el-button>
        </div>
        <div>{{ admin.role }}</div>
        <div class="userinfo-container">
          <div>用户名：{{ admin.name }}</div>
          <div>手机号码：{{ admin.phone }}</div>
          <div>电话号码：{{ admin.telephone }}</div>
          <div>地址：{{ admin.address }}</div>
          <div>用户状态：
            <el-switch
                v-model="admin.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="updateState(admin)"
                active-text="启用"
                inactive-text="禁用">
            </el-switch>
          </div>
          <div>
            用户角色：
            <el-tag type="success" v-for="(role,indexj) in admin.roles" :key="indexj" style="margin-right:2px">
              {{ role.nameZh }}
            </el-tag>
            <el-popover
                placement="right"
                title="用户角色"
                width="200"
                @show="showPopover(admin)"
                @hide="hidePopover(admin)"
                trigger="click">
              <el-select v-model="value" multiple placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.nameZh"
                    :value="item.name">
                </el-option>
              </el-select>
              <el-button slot="reference" style="color: #9aa3a8;margin-left: 5px" type="text"><i
                  class="el-icon-more"></i></el-button>
            </el-popover>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  name: "SysAdmin",
  data() {
    return {
      search: "",
      allAdmins: [],
      adminEnable: true,
      options: [],
      value: ''
    }
  },
  mounted() {
    this.initAdmins(),
        this.getAllRole()
  },
  methods: {
    hidePopover(admin) {
      let flag = false;
      let oldRoles = admin.roles;
      if (this.value) {
        admin.roles = []
        admin.authorities = []
        this.value.forEach(name => {
          this.options.forEach(ele => {
            if (ele.name == name) {
              admin.roles.push(ele)
              admin.authorities.push({"authority": name})
            }
          })
        })
      }
      let newRoles = admin.roles;
      if (!_.isEqual(oldRoles, newRoles)) {
        flag = false
        this.updateAdmin(admin)
      }

    },
    showPopover(admin) {
      if (admin.roles.length !== 0) {
        this.value = []
        admin.roles.forEach(role => {
          this.value.push(role.name)
        })
      } else {
        this.value = []
      }
    },
    getAllRole() {
      this.getRequest("/role/").then(resp => {
        if (resp) {
          this.options = resp
        }
      })
    },

    initAdmins() {
      this.postRequest("/system/admin/getAllAdmins?name=" + this.search).then(resp => {
        if (resp) {
          this.allAdmins = resp
          console.log(JSON.stringify(resp))
        }
      })
    },
    searchClick() {
      this.initAdmins()
    },
    clearClick() {
      this.search = '';
      this.initAdmins();
    },
    delClick(adminId) {
      this.postRequest("/system/admin/deleteAdmin/" + adminId).then(resp => {
        if (resp) {
          this.initAdmins();
        }
      })
    },
    updateState(admin) {
      this.postRequest("/system/admin/updateAdmin", admin).then(resp => {
        if (resp) {
          this.initAdmins();
        }
      })
    },
    updateAdmin(admin) {
      let url = "/system/admin/updateAdminAndRole?adminId=" + admin.id;
      admin.roles.forEach(sr => {
        url += '&rids=' + sr.id;
      })
      this.postRequest(url).then(resp => {
        if (resp) {
          this.initAdmins();
        }
      })
    }
  }
}
</script>

<style scoped>
.search-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.main-container {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.main-container .box-card {
  width: 370px;
  margin-top: 20px;
  margin-left: 10px;
}

.userinfo-container {
  font-size: 14px;
  color: #3e76de;
}


</style>